<template>
  <div ref="main3" id="mai3" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main3);
      let pixelSeries = [];
      // 指定图表的配置项和数据
      let option = {
        title: [
          {
            text: "",
          },
        ],
        graphic: [1, 2].map((v, index) => ({
          type: "group",
          left: `${(index + 1) * 30}%`,
          bottom: "30%",

          children: [
            {
              type: "rect",
              z: 100,
              shape: {
                width: 80 * 2,
                height: 20,
              },
              style: {
                fill: "rgba(0,0,0,0)",
              },
            },
          ],
        })),
        legend: {
          type: "scroll",
          orient: "vartical",
          itemWidth: 15,
          itemHeight: 16,
          data: ["图一", "图二", "图三", "图四"],
          top: "center",
          right: "63",
          itemGap: 23,
          padding: [40, 0],
          textStyle: {
            color: "#FFFFFF",
          },
        },
        radar: [
          {
            indicator: [
              { text: "指标一" },
              { text: "指标二" },
              { text: "指标三" },
              { text: "指标四" },
              { text: "指标五" },
              { text: "指标一" },
              { text: "指标二" },
              { text: "指标三" },
              { text: "指标四" },
              { text: "指标五" },
            ],
            center: ["35%", "50%"],
            radius: 85,
            startAngle: 90,
            splitNumber: 4,
            shape: "circle",
            name: {
              formatter: "{value}",
              textStyle: {
                color: "#72ACD1",
              },
            },
            splitArea: {
              areaStyle: {
                color: [
                  "rgba(98,171,228, 1)",
                  "rgba(36,184,179, 1)",
                  "rgba(98,171,228, 1)",
                  "rgba(65,139,212, 1)",
                  "rgba(114, 172, 209, 1)",
                ],
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 10,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.5)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.5)",
              },
            },
          },
        ],
        series: [
          {
            name: "雷达图",
            type: "radar",
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },
            symbolSize: 0,
            data: [
              {
                value: [20,30,40,50,60,50,20,10,30,44],
                name: "图一",
                areaStyle: {
                  color: "rgba(59,217,211, 0.9)",
                },
              },
              {
                value: [60, 5, 0.3, 100, 1500],
                name: "图二",
                areaStyle: {
                  color: "rgba(20,185,118,  0.9)",
                },
              },
              {
                value: [10,22,33,11,10,24,29,90,40,14],
                name: "图三",
                areaStyle: {
                  color: "rgba(248,100,85, 0.9)",
                },
              },  {
                value: [50,20,10,70,90,20,70,40,10,24],
                name: "图四",
                areaStyle: {
                  color: "rgba(121,122,210, 0.9)",
                },
              },
            ],
          },
        ],
        color: ["#22EBF3", "#27A466", "#F96451",'#7B6FD2'],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
